<template>
    <div>
        <el-tabs>
            <el-tab-pane label="属性">
                <el-form :model="abilityForm" label-width="130px" style="overflow:hidden" :rules="rule" ref="rule">
                    <el-button class="is-top" size="small" @click="openAddNewAttribute"><i class="iconfont icon-jiahao" > 添加新属性</i></el-button>
                    <el-form-item></el-form-item>
                    <el-form-item  label="属性名" style="width:500px;">
                        <el-select value-key="attrId" placeholder="请选择属性名" v-model="attributeForm" @change="get_ability(attributeForm.attrId)">
                            <el-option v-for="i in attributeList" :key="i.attrId" :label="i.attrName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  label="属性值" prop="abilityName" style="width: 500px;">
                        <el-select v-model="abilityForm" value-key="abilityId" placeholder="请选择属性值">
                            <el-option v-for="i in abilityList" :key="i.abilityId" :label="i.abilityName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left:120px;">
                        <el-button type="primary" @click="save('rule')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <!--添加新属性-->
        <el-dialog v-dialogDrag :visible.sync="addNewAttribute" title="新增属性" width="50%" :modal="false" :close-on-click-modal="false" style="margin-top:20px">
            <add_new_attribute></add_new_attribute>
        </el-dialog>
    </div>
</template>

<script>
    import add_new_attribute from "./add_new_attribute";
    export default {
        name:"add_attribute",
        components:{
            add_new_attribute
        },
        data(){
            return{
                //产品属性名数据
                attributeList:[],
                //产品属性值数据
                abilityList:[],
                //添加产品属性名数据
                attributeForm:{
                    attrId:0,
                    attrName:'',
                },
                //添加产品属性值数据
                abilityForm:{
                    abilityId:0,
                    abilityName:''
                },
                //属性名+属性值数据
                attr:{
                    attrId:0,
                    attrName:'',
                    abilityId:0,
                    abilityName:''
                },
                //添加新属性弹框状态
                addNewAttribute:false,
                //选择属性规则
                rule: {
                    abilityName: [
                        { required: true, message: '请选择属性值', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            //产品属性查询
            attribute(){
                this.axios.get("api/product/attribute-list").then(v=>{
                    this.attributeList=v.data;
                }).catch()
            },
            //通过属性名获得属性值
            get_ability(attrId){
                this.abilityForm={
                    abilityId:0,
                    abilityName:''
                };
                this.attributeList.forEach(item=>{
                  if(item.attrId==attrId){
                      this.abilityList=item.ability;
                  }
              })
            },
            //打开添加新属性弹框
            openAddNewAttribute(){
                this.$store.dispatch("setVueAddAttribute",this);
                this.addNewAttribute=true;
            },
            //清空数据
            clear(){
                this.abilityForm={
                    abilityId:0,
                    abilityName:''
                },
                this.attributeForm={
                    attrId:0,
                    attrName:'',
                },
                this.attr={
                    attrId:0,
                    attrName:'',
                    abilityId:0,
                    abilityName:''
                }
                this.abilityList=[]
            },
            //取消新增
            cancel(){
                this.clear();
                this.$store.state.vueAddProduct.addAttributeVisible = false;
            },
            //初始化数据
            init(){
                this.attr.abilityId=this.abilityForm.abilityId;
                this.attr.abilityName=this.abilityForm.abilityName;
                this.attr.attrId=this.attributeForm.attrId;
                this.attr.attributeName=this.attributeForm.attrName;
            },
            //确认按钮点击事件：将选中的属性添加到新增产品属性中
            save(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //是否添加的标识，为true则执行添加
                        let flag = true;
                        // 判断是否已经存在属性
                        this.$store.state.vueAddProduct.attributeList.forEach(attr => {
                            if (attr.attrId==this.attributeForm.attrId){
                                attr.abilityName=this.abilityForm.abilityName;
                                flag = false
                                return
                            }
                        })
                        //列表中不存在该属性，执行添加
                        if(flag){
                            if(this.abilityForm.abilityId!=null&&this.attributeForm.attrId!=null){
                                this.init();
                                this.$store.state.vueAddProduct.attributeList.push(this.attr);
                                this.$store.state.vueAddProduct.abilities.push(this.abilityForm);
                            }
                        }
                        this.global.mes_success("操作成功");
                        this.clear();
                        this.$store.state.vueAddProduct.addAttributeVisible = false;
                    }else {
                        this.global.mes_warning("请选择属性！")
                        return false;
                    }
                });
            }
        },
        created(){
            this.attribute();
        }
    }
</script>

<style>
    .el-select{width: 70%!important;}
</style>